<template>
    <yd-layout class="bgstyle">
        <yd-navbar title="找回密码">
        <a href="javascript:;" @click="$router.go(-1)" slot="left">
            <yd-navbar-back-icon></yd-navbar-back-icon>
        </a>
        </yd-navbar>
        <div class="inputstyle">
            <yd-flexbox direction="vertical" class="inputstyle">
                        <yd-flexbox-item>
                            <yd-cell-group class="demo-small-pitch">
                                <yd-cell-item>
                                  <hd-svg-icon name="hd-dianhua" slot="left" class="iconstyle"/>
                                  <yd-input slot="right" type="tel" v-model="regmobile" ref="regmobile" required regex="mobile" placeholder="请输入手机号码" :showRequiredIcon="false"></yd-input>
                                </yd-cell-item>
                                <!-- <p slot="bottom" style="color:#F00;padding: 0 .3rem;" v-html="result"></p> -->
                            </yd-cell-group>
                        </yd-flexbox-item>
                        <!-- <yd-flexbox-item>
                            <yd-cell-group class="demo-small-pitch">
                                <yd-flexbox>
                                    <yd-flexbox-item>
                                        <yd-cell-item>
                                            <yd-input slot="right" max="4" v-model="code" type="text" placeholder="验证码" required :showErrorIcon="true" :showSuccessIcon="false" :showRequiredIcon="false"></yd-input>
                                        </yd-cell-item>
                                    </yd-flexbox-item>
                                    <yd-flexbox-item>
                                      <img @click="clickValidateCode" :src="codeimg" class="codeimg"> 
                                    </yd-flexbox-item>
                                </yd-flexbox>
                            </yd-cell-group>
                        </yd-flexbox-item> -->
                        <yd-flexbox-item>
                            <yd-cell-group class="demo-small-pitch">
                                <yd-flexbox>
                                    <yd-flexbox-item>
                                        <yd-cell-item>
                                            <yd-input slot="right" v-model="mobilecode" max="6" required type="text" placeholder="输入手机验证码" :showErrorIcon="true" :showSuccessIcon="false" :showRequiredIcon="false"></yd-input>
                                        </yd-cell-item>
                                    </yd-flexbox-item>
                                    <yd-flexbox-item>
                                        <yd-button type="primary" @click.native="clickSendMessage" class="getcode">获取短信验证码</yd-button>
                                    </yd-flexbox-item>
                                </yd-flexbox>
                            </yd-cell-group>
                        </yd-flexbox-item>
                        <yd-flexbox-item>
                            <yd-cell-group class="demo-small-pitch">
                                <yd-cell-item>
                                  <hd-svg-icon name="hd-mm" slot="left" class="iconstyle"/>
                                  <yd-input slot="right" type="password" required v-model="setpassword" placeholder="请输入新密码" :showRequiredIcon="false" :showSuccessIcon="false" ></yd-input>
                                </yd-cell-item> 
                            </yd-cell-group>  
                        </yd-flexbox-item>
                        <yd-flexbox-item>
                          <yd-button-group>
                                <yd-button size="large" type="primary" style="height:40px;" @click.native="clickRegist">注册</yd-button>
                          </yd-button-group>  
                        </yd-flexbox-item>
                    </yd-flexbox>  
        </div>
    </yd-layout>
</template>
<script>
// import sha1 from 'sha1'
// import GUID from 'hdc/guid'

export default {
  name: 'Retrievepassword',
  data () {
    return {
      codeimg: '',
      regmobile: '',
      setpassword: '',
      code: '',
      result: '',
      mobilecode: '',
      guid2: ''
    }
  },
  // mounted: function () {
  //   this.clickValidateCode()
  // },
  methods: {
    // clickValidateCode () {
    //   var guidobject = new GUID();
    //   var guid = guidobject.newGUID();
    //   this.guid2 = guid;
    //   if (!guid) {
    //     guidobject = new GUID();
    //     guid = guidobject.newGUID();
    //   }
    //     // 获取验证码
    //   this.hdAjax({
    //     url: this.API.validateCode,
    //     data: {
    //       key: guid
    //     },
    //     success: (resultData) => {
    //       this.codeimg = resultData.data[guid]
    //     }
    //   });
    //   return guid;
    // },
    clickSendMessage () {
      if (!this.regmobile) {
        this.$dialog.toast({mes: '请输入手机号!'})
        return false
      }
    //   const input = this.$refs.input9;
    //   this.result = `{<br />  valid：${input.valid}，<br />  errorMes：'${input.errorMsg}'，<br />  errorCode：'${input.errorCode}'<br />}`;
      if (!this.code) {
        this.$dialog.toast({mes: '请输入验证码!'})
        return false;
      }
      this.hdAjax({
        url: this.API.getMsg,
        data: {
          mobile: this.regmobile,
          clientType: 'app',
          key: this.guid2,
          vCode: this.mobilecode
        },
        success: (resultData) => {
          if (resultData.data && resultData.errcode === 0) {
            this.$dialog.toast({mes: '验证码已发送'})
          } else {
            this.$dialog.toast({mes: resultData.errmsg})
          }
        }
      })
    },
    checkMessage () {
      if (!this.regmobile) {
        this.$dialog.toast({mes: '请输入手机号!'})
        return false
      }
      if (!this.code) {
        this.$dialog.toast({mes: '请输入验证码!'})
        return false;
      }
    }
  }
}
</script>
<style scoped>  
    .inputstyle{
      width: 300px;
      margin:0 auto;
      padding:20px;
     }
     /* .thirdParty{
       width: 100%;
       text-align: center;
       padding-top:1rem;
     }
     .thirdicon{
       line-height: 1.25rem;
       text-align: center;
     } */
    /* .div2{ 
        border-top:#d0d0d0 1px solid;
        transform-origin: 0 0;
        transform:scaleY(.5);
    } */
    .passwordbutton{
        border:none;
        color: #8E8E8E;
        float: right;
        padding-top: .2rem;
    }
    .bgstyle{
      background-color:#ffffff;
    }
    .loginstyle{
        width:236px;
        height:40px;

    }
    .codeimg{
        width:120px;
        height:40px;
        float: right;
    }
    .getcode{
      height: .9rem;
      width: 90%;
      padding: 0;
      float: right;
    }
    .iconstyle{
      font-size: .5rem !important;
      margin-right: .1rem;
      fill: #6b6b6b !important;
    }
    .cell-icon{
      margin-right: 0;
    }
    .cell-right{
      padding-right:0;
    }
    .cell-item{
      padding-left:0;
    }
</style>